<script lang="ts" setup>
import { useTheme } from "@@/composables/useTheme"

const { activeThemeName, setTheme } = useTheme()

function onToggle(e: MouseEvent) {
  const next = activeThemeName.value === "dark" ? "normal" : "dark"
  setTheme(e, next)
}
</script>

<template>
  <!-- 原下拉菜单版本（已注释） -->
  <!-- <el-dropdown trigger="click">
    <div>
      <el-tooltip effect="dark" content="主题模式" placement="bottom">
        <el-icon :size="20">
          <MagicStick />
        </el-icon>
      </el-tooltip>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="(theme, index) in themeList"
          :key="index"
          :disabled="activeThemeName === theme.name"
          @click="(e: MouseEvent) => setTheme(e, theme.name)"
        >
          <span>{{ theme.title }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown> -->

  <!-- 新滑块开关版本 -->
  <button class="theme-toggle" type="button" @click="onToggle($event)">
    <span class="track">
      <span class="thumb" :class="activeThemeName === 'dark' ? 'is-dark' : 'is-light'">
        <!-- 太阳图标 -->
        <svg v-if="activeThemeName === 'normal'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="5" />
          <line x1="12" y1="1" x2="12" y2="3" />
          <line x1="12" y1="21" x2="12" y2="23" />
          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
          <line x1="1" y1="12" x2="3" y2="12" />
          <line x1="21" y1="12" x2="23" y2="12" />
          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
        </svg>
        <!-- 月亮图标 -->
        <svg v-else class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
        </svg>
      </span>
    </span>
  </button>
</template>

<style scoped>
.theme-toggle {
  appearance: none;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.track {
  width: 44px;
  height: 24px;
  background: var(--el-fill-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: background-color 0.2s ease;
}
.thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--el-bg-color);
  box-shadow: inset 0 0 0 2px var(--el-border-color-lighter);
  transform: translateX(0);
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb.is-dark {
  transform: translateX(20px);
  background: var(--el-bg-color);
  box-shadow: inset 0 0 0 2px var(--el-border-color-lighter);
}
.icon {
  width: 12px;
  height: 12px;
  color: var(--el-text-color-regular);
}
</style>
